<template>
  <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
    <el-dialog
      id="cs-dialog"
      v-if="warning"
      title="温馨提示"
      style="font-weight: bold"
      :visible="warning"
      width="30%"
      :before-close = "closeDialog"
      :modal = "false"
      :append-to-body = "true">
      <span>为保障您更稳定使用 Beetles 系统, 请</span>
      <div style="margin-top: 20px"><span style="font-size: 18px;color: #1e9fff">使用</span>
        <span class="google_logo"></span><span class="google_word_logo"></span></div>
      <div style="margin-top: 20px"><span style="font-size: 18px;color: #FF0040">关闭</span><span class="vpn_logo"></span>VPN</div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="warning = false">知道了</el-button>
  </span>
    </el-dialog>
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top ref="top"/>
    </div>
    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sidebar/>
      </div>
      <div class="avue-main" >
        <!-- 顶部标签卡 -->
        <tags/>
        <transition name="fade-scale">
          <search class="avue-view" v-show="isSearch"></search>
        </transition>
        <!-- 主体视图层 -->
        <div  style="overflow-y:auto;overflow-x:hidden;height: 100%;box-sizing: border-box;padding-bottom: 50px" id="avue-view"
             v-show="!isSearch">
          <keep-alive>
            <router-view class="avue-view" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <router-view class="avue-view" v-if="!$route.meta.keepAlive"/>
        </div>
      </div>
    </div>
    <div class="avue-shade" @click="showCollapse"></div>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import tags from "./tags";
import search from "./search";
import top from "./top/";
import sidebar from "./sidebar/";
import admin from "@/util/admin";
import {validatenull} from "@/util/validate";
import {calcDate} from "@/util/date.js";
import {getStore} from "@/util/store.js";
import {createWebSocket} from "@/util/ws";
import {EventBus} from "../../api/business/EventBus ";

export default {
  components: {
    top,
    tags,
    search,
    sidebar,
  },
  name: "index",
  provide() {
    return {
      index: this
    };
  },
  data() {
    return {
      //搜索控制
      isSearch: false,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      warning: false,
    };
  },
  beforeDestroy() {
    let self = this;
    if (self.socket) {
      self.socket.close();
      self.socket = null;
    }
  },
  created() {
    //实时检测刷新token
    this.refreshToken();
    if (window.sessionStorage.getItem('vpn',) === "true"){
      this.warning = true
    }
    window.sessionStorage.setItem('vpn', 'false');
    //如果不是谷歌内核提示，如果使用VPN提示
    // let notChrome
    // var userAgent = navigator.userAgent
    // if (userAgent.indexOf("Chrome") > -1) {
    //   notChrome = false
    // } else {
    //   notChrome = true
    // }
    // var ipCity = returnCitySN["cname"];
    // let isvpn = ipCity !== 'CHINA'
    // if (notChrome === true || isvpn === true) {
    //   this.warning = true
    // }
  },
  mounted() {
    this.init();
    // EventBus.$on("child",(msg)=>{
    //   debugger
    //   this.warning = msg
    // });
  },
  computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu", "offer", "userInfo","oc"]),
  props: [],
  methods: {
    closeDialog(){
      this.warning = false
    },
    showCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    initSocket() {
      let self = this;
      if (!self.socket) {
        self.socket = createWebSocket('/api/blade-system/wss', 'json');
        if (self.socket) self.socket.ontextmessage = (msg) => {
          let msgObj = JSON.parse(msg);
          console.log("index receive:" + msg)
          if (msgObj) {
            if (msgObj.messageName === 'tenantMessage' && msgObj.data.messageName === 'tenantVariablesChanged') {
              if(msgObj.data.variables != null) {
                let userInfo = this.userInfo;
                msgObj.data.variables.forEach((variable)=>{
                  let key = variable.key;
                  let value = variable.value;
                  userInfo.detail.tenantVariables[key] = value;
                });
                this.$store.commit("SET_USER_INFO",userInfo);
              }
            }
          }
        };
        if (self.socket) self.socket.onerror = () => {
          this.$message({
            type: 'warning',
            message: '您的网络目前不稳定，数据可能不能自动刷新！'
          });
        };
      }
    },
    // 初始化
    init() {
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
      this.$store.dispatch("FlowRoutes").then(() => {
      });
      this.initSocket();
    },
    //打开菜单
    openMenu(item = {}) {
      this.$store.dispatch("GetMenu", item.id).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        //当点击顶部菜单后默认打开第一个菜单
        /*if (!this.validatenull(item)) {
          let itemActive = {},
            childItemActive = 0;
          if (item.path) {
            itemActive = item;
          } else {
            if (this.menu[childItemActive].length === 0) {
              itemActive = this.menu[childItemActive];
            } else {
              itemActive = this.menu[childItemActive].children[childItemActive];
            }
          }
          this.$store.commit('SET_MENU_ID', item);
          this.$router.push({
            path: this.$router.$avueRouter.getPath({
              name: (itemActive.label || itemActive.name),
              src: itemActive.path
            }, itemActive.meta)
          });
        }*/

      });
    },
    // 定时检测token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "token",
          debug: true
        }) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
          this.refreshLock = true;
          this.$store
            .dispatch("refreshToken")
            .then(() => {
              this.refreshLock = false;
            })
            .catch(() => {
              this.refreshLock = false;
            });
        }
      }, 1000);
    }
  }
};

function ajax() {

}
</script>
<style lang="scss" scoped>
.warning {
  display: flex;
  background: white;
  height: 60px;
  width: 100%;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  font-weight: 600;

  .use {
    color: #409eff;
  }

  .close {
    color: #E74C3C;
  }




  .close_warning {
    margin: 0 auto;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
  }
  .close_warning :hover{
    color:#00a2ff ;
  }
}
.google_logo {
  display: inline-block;
  width: 23px;
  background-image: url('/img/icon/google_logo.png');
  background-size: 100% 100%;
  height: 23px;
  vertical-align: middle;
  margin: 0 4px 7px 20px;
}


.google_word_logo {
  display: inline-block;
  width: 103px;
  background-image: url('/img/icon/Google_logo_and_Chrome_wordmark.svg.png');
  background-size: 100% 100%;
  height: 16px;
  vertical-align: middle;
  margin: 0 4px;
}

.vpn_logo {
  display: inline-block;
  width: 23px;
  background-image: url('/img/icon/vpn_logo.png');
  background-size: 100% 100%;
  height: 23px;
  vertical-align: middle;
  margin: 0 4px 7px 20px;
}
</style>
